<template>
  <div class="tab">
    <el-card>
      <!-- 订单号查询, 用户名查询,销售员名称查询 -->
      <el-input
        v-model="orderId"
        style="width: 200px;margin-right: 5px"
        placeholder="按订单号查询"
      ></el-input>
      <el-input
        v-model="userName"
        style="width: 200px;margin-right: 5px"
        placeholder="按用户名称查询"
      ></el-input>
      <el-input
        v-model="salesName"
        style="width: 200px;margin-right: 5px"
        placeholder="按销售员名称查询"
      ></el-input>
      <el-date-picker
        style="margin-right: 5px"
        v-model="dateTime"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button type="primary" @click="handleInit">查询</el-button>
      <el-button type="success" @click="handleInit" icon="el-icon-refresh"
        >刷新</el-button
      >
      <el-table :data="tableData" style="width: 100%; margin-top: 30px;">
        <el-table-column prop="createTime" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="orderId" label="订单编号" width="180">
        </el-table-column>
        <el-table-column prop="userName" label="客户姓名" width="180">
        </el-table-column>
        <el-table-column prop="salesName" label="成单销售"> </el-table-column>
        <el-table-column prop="salesName" label="成单商品">
          <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.gname" :key="index">{{item}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="salesName" label="成单商品售价(元)">
          <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.gprice" :key="index">{{item}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="成单金额(元)"> </el-table-column>
        <el-table-column prop="img" label="成单凭证">
          <template slot-scope="scope">
            <img
              :src="scope.row.img"
              class="images"
              @click="click(scope.row.img)"
              v-if="scope.row.img != ''"
            />
            <span v-else>无</span>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :visible.sync="dialogVisible"
        :show-close=false
    
      >
       <div class="big">
          <img :src="image" alt="" />
       </div>
      </el-dialog>
    </el-card>
    <el-pagination
      class="pages"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<script>
import { ordList } from "@/api/order";
export default {
  data() {
    return {
      page: 1,
      size: 10,
      total: 1,
      tableData: [],
      dateTime: [],
      orderId: "",
      userName: "",
      salesName: "",
      start: "",
      over: "",
      image: "",
      dialogVisible: false
    };
  },
  mounted() {
    this.handleInit();
  },
  methods: {
    click(e) {
      console.log(e);
      if (e) {
        this.image = e;
        this.dialogVisible = true;
      }
    },

    handleInit() {
      if (this.dateTime !== null && this.dateTime !== "") {
        this.start = this.dateTime[0];
        this.over = this.dateTime[1];
      }
      var that = this;
      let form = {
        page: that.page,
        size: that.size,
        start: this.start,
        over: this.over,
        orderId: this.orderId,
        userName: this.userName,
        salesName: this.salesName
      };
      ordList(form).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.dateTime = [];
          this.userName = "";
          this.salesName = "";
          this.orderId = "";
          let list = res.result.records
          for(var i = 0; i<list.length; i++) {
            list[i].gname = list[i].gname.split(',')
            list[i].gimg = list[i].gimg.split(',')
            list[i].gprice = list[i].gprice.split(',')
            if(list[i].img == null) {
              list[i].img = ''
            }
          }
          that.tableData = list;
          console.log(that.tableData)
          that.total = Number(res.result.total);
        }
      });
    },
    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.list();
      
    }
  }
};
</script>
<style scoped>
.images {
  width: 60px;
  height: 60px;
}
.pages {
  margin-top: 25px;
}
.big{
  text-align: center;
}
.big img{
  width: 100%;
  height: 100%;
}
</style>
